<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useField } from 'vee-validate'
import AppNotificationSelect from '~/components/AppNotificationSelect.vue'
import BaseImage from '~/components/BaseImage.vue'
import { timeToDateFormat3, timeToDateFormat4 } from '~/utils/time'
import FeedbackChatModal from './_components/FeedbackChatModal.vue'
import emptyIcon from '/images/webp/personal/empty-img.webp'

const { t } = useI18n()
definePageMeta({
  layout: 'with-menu',
  title: 'notifications'
});

interface NotificationItem {
  id: string;
  type: string;
  title: string;
  content: any;
  is_read: number;
  timestamp: number;
  target: string;
  target_id: string;
  payload: string;
}

interface MessageItem {
  id: string; 
  uid: string; 
  from_user: string; 
  flags: number; 
  all: number; 
  agent: number; 
  usernames: any; 
  user_levels: any; 
  vip_levels: any; 
  agents: any; 
  title: string; 
  content: any; 
  created_at: number; 
  types: number;
  read: boolean;
  collapsed: boolean;
}

interface AnnouncementItem {
  bounce_frequency: number;
  bounce_frequency_limit: number;
  bounce_location: number;
  client: string;
  content: string;
  created_at: number;
  created_by: string;
  created_uid: string;
  crowd_content: string;
  end_time: number;
  flags: string;
  id: string;
  is_limit: number;
  pop_up_type: number;
  read: boolean;
  seq: number;
  start_time: number;
  state: number;
  title: string;
  updated_at: number;
  updated_by: string;
  image_info: string;
  image_url: string;
}

interface TabItem {
  label: string;
  count: number;
  plus?: boolean;
}

interface FeedbackItem {
  id: string;
  time: string;
  status: '待处理' | '已完成';
  content: string;
}

const { notificationsCount, runNotificationsCount } = useNotificationState()

const activeTab = ref(0);
const activeFeedbackTab = ref(0);
const tabs: TabItem[] = [
  { label: t('notification_notification'), count: notificationsCount.value?.notification_count || 0 },
  { label: t('notification_message'), count: notificationsCount.value?.station_count || 0},
  { label: t('notification_announcement'), count: notificationsCount.value?.notice_count || 0 },
  { label: t('notification_feedback_reward'), count: notificationsCount.value?.reward_count || 0 }
];

const feedbackTabs = [
  { name: t('notification_create_feedback') },
  { name: t('notification_my_feedback') }
];

const pageCurrent = ref(1)
const pageSize = 10
const getCurrentTotal = ref(0)
const notifications = ref<NotificationItem[]>([]);
const {
  list: notificationList,
  runAsync: runAsyncMemberNotifications,
  loading: memberNotifyListLoading,
  total: notifyTotal,
  next: nextNotify,
  loadMore: loadMoreNotify,
  resetPage: resetNotifyPage,
} = useList(ApiMemberNotifications, {
  debounceInterval: 500,
  debounceOptions: {
    leading: true,
    trailing: false,
  },
  onSuccess(res) {
    if (res !== null && res && res.d) {
      const data = res.d
      data.forEach((item) => {
        item.content = JSON.parse(item.payload)
      })
      console.log(data)
      if (pageCurrent.value > 1)
        notifications.value = notifications.value.concat(data)
      else
        notifications.value = data
    }
    getCurrentTotal.value = Number(mul(pageCurrent.value, pageSize))
  },
}, { page_size: pageSize, page: pageCurrent.value })


// 标记已读（ 通知 ）
const {
  run: runNotificationsRead,
} = useRequest(ApiMemberNotificationsRead, {
  onSuccess(data, params) {
    for (let i = 0; i < notifications.value?.length; i++) {
      const item = notifications.value[i]
      if (item.id === params[0].id) {
        item.is_read = 2
        break
      }
    }
  },
})
// 全部已读（ 通知 ）
const {
  run: runNotificationsReadAll,
} = useRequest(ApiMemberNotificationsReadAll, {
  onSuccess() {
    notifications.value?.forEach((item) => {
      item.is_read = 2
    })
  },
})

// 删除通知
const {
  runAsync: runAsyncNotificationsDelete,
} = useRequest(ApiMemberNotificationsDelete, {
  onSuccess() {
    message.success(t('delete_success'))
  },
})


function getTitle(title: string, flag?: boolean) {
  switch (title) {
    case 'withdraw_success': return flag ? t('withdraw_success_received') : t('withdraw_success')
    case 'withdraw_fail': return t('withdraw_fail')
    case 'deposit_success': return flag ? t('deposit_success_received') : t('deposit_success')
    case 'deposit_fail': return t('deposit_fail')
    case 'deposit_in_process': return flag ? t('deposit_in_process_now') : t('deposit_in_process')
    case 'withdraw_in_process': return flag ? t('withdraw_in_process_now') : t('withdraw_in_process')
    default: return false
  }
}

function getAmount(item: { title: string; content: { finally_amount: string; pay_amount: string } }) {
  const isSuccess = item.title.includes('success')
  return isSuccess ? item.content.finally_amount : (item.content.pay_amount ?? item.content.finally_amount)
}


function refreshData(ty?: any) {
  runNotificationsCount()
  if (ty === 'station_read')
    return
  const list = document.querySelector('.scroll-y.base-list.app-notice-notify')
  if (list)
    list.scrollTop = 0
  pageCurrent.value = 1
  resetNotifyPage()
  pageInit()
}

onActivated(() => {
  const list = document.querySelector('.scroll-y.base-list.app-notice-notify')
  if (list)
    list.scrollTop = 0
  pageCurrent.value = 1
  resetNotifyPage()
  pageInit()
})

onMounted(() => {
  pageInit()
  runNotificationsCount()
  runFeedbackList()
})


function pageInit(ty?: any) {
  return Promise.all([
    runAsyncMemberNotifications({ page: pageCurrent.value, page_size: pageSize }),
    runAsyncMemberStationInfoList({ page: pageCurrent.value, page_size: pageSize }),
    runAsyncMemberNoticeList({ types: '1', page: pageCurrent.value, page_size: pageSize })
  ])
}



// 站内信列表数据
const messages = ref<MessageItem[]>([]);
// 站内信列表
const {
  list: stationInfoList,
  runAsync: runAsyncMemberStationInfoList,
  loading: memberStationListLoading,
  total: stationTotal,
  next: nextStation,
  loadMore: loadMoreStation,
  resetPage: resetStationPage,
} = useList(ApiMemberStationInfoList, {
  debounceInterval: 500,
  debounceOptions: {
    leading: true,
    trailing: false,
  },
  onSuccess(res, p) {
    if (res !== null && res && res.d) {
      const data = res.d.map((item: any) => ({
        id: item.id,
        uid: item.uid || '',
        from_user: item.from_user || '',
        flags: item.flags || 0,
        all: item.all || 0,
        agent: item.agent || 0,
        usernames: item.usernames || {},
        user_levels: item.user_levels || {},
        vip_levels: item.vip_levels || {},
        agents: item.agents || {},
        title: item.title,
        content: item.msg,
        created_at: item.created_at,
        types: item.types || 0,
        read: false,
        collapsed: true
      }))
      if (pageCurrent.value > 1)
        messages.value = messages.value.concat(data)
      else
        messages.value = data
    }
    getCurrentTotal.value = Number(mul(pageCurrent.value, pageSize))
  },
}, { page_size: pageSize, page: pageCurrent.value })



// 标记已读（ 站内信 ）
const {
  run: runStationInfoDetailUpdateState,
} = useRequest(ApiMemberStationInfoDetailUpdateState, {
  onSuccess(data, params) {
    for (let i = 0; i < stationInfoList.value?.length; i++) {
      const item = stationInfoList.value[i]
      if (item.id === params[0].id) {
        item.read = true
        break
      }
    }
  },
})


// 全部已读（ 站内信 ）
const {
  run: runMemberUpdateAllState,
} = useRequest(ApiMemberStationInfoDetailUpdateAllState, {
  onSuccess() {
    stationInfoList.value?.forEach((item) => {
      item.read = true
    })
  },
})

// 删除站内信
const {
  runAsync: runAsyncZnxDelete,
} = useRequest(ApiMemberStationInfoDetailDelete, {
  onSuccess() {
  },
})


// 公告列表数据
const announcements = ref<AnnouncementItem[]>([]);

const {
  list: noticeList,
  runAsync: runAsyncMemberNoticeList,
  loading: memberNoticeListLoading,
  total: noticeTotal,
  loadMore: loadMoreNotice,
  resetPage: resetNoticePage,
} = useList(ApiMemberNoticeList, {
  debounceInterval: 500,
  debounceOptions: {
    leading: true,
    trailing: false,
  },
  onSuccess(res) {
    if (res !== null && res && res.d) {
      const data = res.d
      if (pageCurrent.value > 1)
        announcements.value = announcements.value.concat(data)
      else
        announcements.value = data
    }
  },
}, { page_size: pageSize, page: pageCurrent.value })

const showUnreadOnly = ref(false);
const handleTabChange = (index: number) => {
  activeTab.value = index;
};

const handleFeedbackTabChange = (index: number) => {
  activeFeedbackTab.value = index;
};

const deleteNotification = (id: string, index: number) => {
  runAsyncNotificationsDelete
  runAsyncNotificationsDelete({ id }).then(() => {
    notifications.value?.splice(index, 1)
  })
};


const deleteMessage = (id: string) => {
  messages.value = messages.value.filter((item: MessageItem) => item.id !== id);
};

const toggleCollapse = (announcement: AnnouncementItem) => {
  // announcement.collapsed = !announcement.collapsed;
};

const markAllRead = () => {
  if (activeTab.value === 0) {
    notifications.value.forEach((item: NotificationItem) => {
      item.is_read = 1;
    });
  } else if (activeTab.value === 1) {
    messages.value.forEach((item: MessageItem) => {
      // item.read = true;
    });
  } else if (activeTab.value === 2) {
    announcements.value.forEach((item: AnnouncementItem) => {
      item.read = true;
    });
  }
};

const displayNotifications = computed(() => {
  if (showUnreadOnly.value) {
    return notifications.value.filter((item: NotificationItem) => item.is_read === 0);
  }
  return notifications.value;
});

const displayMessages = computed(() => {
  if (showUnreadOnly.value) {
    return messages.value.filter((item: MessageItem) => item.read === false);
  }
  return messages.value;
});

const displayAnnouncements = computed(() => {
  if (showUnreadOnly.value) {
    return announcements.value.filter((item: AnnouncementItem) => item.read === false);
  }
  return announcements.value;
});

const toggleReadStatus = (item: NotificationItem) => {
  item.is_read = item.is_read === 0 ? 1 : 0;
};

// 自定义底部弹框
const showDetailSheet = ref(false);
const currentDetail = ref<NotificationItem | null>(null);

// 打开详情弹框
const openDetailSheet = (item: NotificationItem) => {
  item.is_read === 1 && runNotificationsRead({ id: item.id })
  currentDetail.value = item;
  showDetailSheet.value = true;
  document.body.style.overflow = 'hidden';
};

// 关闭详情弹框
const closeDetailSheet = () => {
  const overlay = document.querySelector('.detail-modal-overlay');
  const container = document.querySelector('.detail-modal-container');

  if (overlay && container) {
    overlay.classList.add('fade-out');
    container.classList.add('slide-down');

    setTimeout(() => {
      showDetailSheet.value = false;
      document.body.style.overflow = '';
    }, 300);
  } else {
    showDetailSheet.value = false;
    document.body.style.overflow = '';
  }
};

// 复制订单号
const copyOrderNo = (orderNo: string, event: MouseEvent) => {
  event.stopPropagation();
  if (!orderNo) return;
  navigator.clipboard.writeText(orderNo);
  // 可以添加复制成功的提示
};

// 格式化显示金额，保留两位小数
const formatAmount = (amount: number) => {
  return amount.toFixed(2);
};

// 格式化日期 (获取月日和时间)
const formatDate = (dateStr: string) => {
  try {
    const date = new Date(dateStr);
    return `${(date.getMonth() + 1).toString().padStart(2, '0')}月${date.getDate().toString().padStart(2, '0')}日${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  } catch (e) {
    return '02月11日14:22'; // 默认值
  }
};

// 添加体育投注弹框·
const showBetSheet = ref(false);
const betDetail = ref({
  id: '93,425,567',
  bettor: 'TESE0000001',
  dateTime: '于07/07/17:42',
  matchTime: '17:42 2023/07/06',
  match: '日本-西班牙',
  betType: '胜平负',
  selection: '胜',
  odds: '1.08',
  betAmount: '1.00000000',
  payAmount: '1.00000000',
  scoreRange: '10-11'
});

// 打开体育投注弹框
const openBetSheet = () => {
  showBetSheet.value = true;
  document.body.style.overflow = 'hidden'; // 防止背景滚动
};

// 关闭体育投注弹框
const closeBetSheet = () => {
  const overlay = document.querySelector('.bet-modal-overlay');
  const container = document.querySelector('.bet-modal-container');

  if (overlay && container) {
    overlay.classList.add('fade-out');
    container.classList.add('slide-down');

    setTimeout(() => {
      showBetSheet.value = false;
      document.body.style.overflow = '';
    }, 300);
  } else {
    showBetSheet.value = false;
    document.body.style.overflow = '';
  }
};

// 复制ID
const copyId = (id: string, event: MouseEvent) => {
  event.stopPropagation();
  if (!id) return;
  navigator.clipboard.writeText(id);
  // 可以添加复制成功的提示
};

const toggleMessageCollapse = (message: MessageItem) => {
  // message.collapsed = !message.collapsed;
};

// 反馈表单数据
const feedbackImages = ref<string[]>([]);
const imageUrl = ref<string[]>([]);
const maxImagesCount = 5;
const maxContentLength = 200;
const feedbackCharCount = computed(() => feedbackText?.value?.length || 0);

const removeEmojis = (str: string) => {
  return str.replace(/[\u{1F300}-\u{1F9FF}]/gu, '');
}

const {
  value: feedbackText,
  errorMessage: feedbackTextError,
  validate: feedbackTextValidate,
  meta: feedbacTextMeta,
  handleBlur,
  resetField,
} = useField<string>('feedbackText', (value) => {
  if (!value)
    return t('input_feedback')
  return ''
})


const {
  run: runFeedbackInsert,
  loading: feedbackInsertLoading,
} = useRequest(ApiMemberFeedbackInsert, {
  onSuccess() {
    feedbackText.value = ''
    resetField()
    message.success(t('success_submit_feedback'))
    runFeedbackList()
    runNotificationsCount()
  },
})


// 我的反馈列表
const myFeedbacks = ref<FeedbackItem[]>([]);

const {
  run: runFeedbackList,
  data: feedbackList,
} = useRequest(ApiMemberFeedbackList, {
  onSuccess: (res) => {
    if (res?.d) {
      myFeedbacks.value = res.d.map(item => ({
        id: item.id,
        time: timeToDateFormat3(item.created_at as number),
        status: item.state === 1 ? '待处理' : '已完成',
        content: item.description
      }))
    }
  },
  onAfter: () => {
    runNotificationsCount()
  },
})

// 待领取奖金
const pendingReward = ref('0');
const showRewardModal = ref(false);
const selectedCurrency = ref('USDT');
const currencyList = [
  { label: 'USDT', value: 'USDT', cur: 'USDT' },
  { label: 'BTC', value: 'BTC', cur: 'BTC' },
  { label: 'ETH', value: 'ETH', cur: 'ETH' },
  { label: 'DOGE', value: 'DOGE', cur: 'DOGE' },
  { label: 'TRX', value: 'TRX', cur: 'TRX' },
  { label: 'LTC', value: 'LTC', cur: 'LTC' }
];
const currentRate = ref(0);
const estimatedAmount = ref('0');

// 上传图片
const uploadImage = () => {
  if (feedbackImages.value.length >= maxImagesCount) {
    // 添加提示：最多上传5张图片
    return;
  }

  // 这里应该有实际的图片上传逻辑
  // 为了示例，添加一个占位图片URL
  feedbackImages.value.push('https://via.placeholder.com/100');
};

// 删除已上传的图片
const removeImage = (index: number) => {
  feedbackImages.value.splice(index, 1);
};

// 提交反馈
const submitFeedback = async () => {
  if (!feedbackText?.value?.trim()) {
    // 添加提示：请输入反馈内容
    message.error(t('notification_enter_feedback_content'));
    return;
  }

  // 提交反馈逻辑
  // ...
  await feedbackTextValidate()
  // 清空表单
  feedbackText.value = '';
  feedbackImages.value = [];

  if (!feedbackTextError.value)
  runFeedbackInsert({ images: imageUrl.value.length ? JSON.stringify(imageUrl.value) : '', description: removeEmojis(feedbackText.value) })

  // 切换到我的反馈标签
  // activeFeedbackTab.value = 1;
};

// 取消反馈
const cancelFeedback = () => {
  feedbackText.value = '';
  feedbackImages.value = [];
};

// 打开领取奖金弹窗
const openRewardModal = () => {
  showRewardModal.value = true;
};

// 关闭领取奖金弹窗
const closeRewardModal = () => {
  showRewardModal.value = false;
};

// 确认领取奖金
const confirmReceiveReward = () => {
  // 领取奖金逻辑
  // ...
  closeRewardModal();
};

const showFeedbackChatModal = ref(false);
const selectedFeedbackForChat = ref<FeedbackItem | null>(null);

const openFeedbackChatModal = (feedback: FeedbackItem) => {
  selectedFeedbackForChat.value = feedback;
  showFeedbackChatModal.value = true;
  document.body.style.overflow = 'hidden'; // Prevent background scrolling
};

const closeFeedbackChatModal = () => {
  const overlay = document.querySelector('.chat-modal-overlay'); // Use the class from FeedbackChatModal.vue
  const container = document.querySelector('.chat-modal-container'); // Use the class from FeedbackChatModal.vue

  if (overlay && container) {
    overlay.classList.add('fade-out');
    container.classList.add('slide-down');

    setTimeout(() => {
      showFeedbackChatModal.value = false;
      selectedFeedbackForChat.value = null;
      document.body.style.overflow = ''; // Restore background scrolling
    }, 300); // Match animation duration
  } else {
    showFeedbackChatModal.value = false;
    selectedFeedbackForChat.value = null;
    document.body.style.overflow = ''; // Restore background scrolling
  }
};
</script>

<template>
  <div class="notification-page">
    <!-- 顶部导航选项卡 -->
    <div class="notification-tabs">
      <div class="tab-item-wrap">
        <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
          @click="handleTabChange(index)">
          <span class="tab-name">{{ tab.label }}</span>
          <span v-if="tab.count > 0" class="tab-badge">
            {{ tab.count > 99 ? '99+' : tab.count }}
          </span>
        </div>
      </div>
    </div>

    <!-- 通知内容区域 -->
    <div class="notification-content" v-if="activeTab === 0">
      <div v-for="(item, index) in displayNotifications" :key="item.id" class="notification-item"
        :class="{ 'unread': item.is_read === 1 }" @click="openDetailSheet(item)">
        <div class="notification-time">
          {{ timeToDateFormat3(item.timestamp as number) }}
          <span v-if="item.is_read === 1" class="unread-indicator"></span>
        </div>
        <div class="notification-status" :class="item.type">
          <div class="status-icon">
            <BaseImage width="14px" url="/images/png/notification/success_icon.png" v-if="item.content?.state == '1'" />
            <BaseImage width="14px" url="/images/png/notification/error_icon.png" v-else-if="item.content?.state == '2 '" />
            <BaseImage width="14px" url="/images/png/notification/warning_icon.png" v-else-if="item.content?.state == '3'" />
          </div>
          <div class="status-text">{{ getTitle(item.title) }}</div>
        </div>
        <div class="notification-amount">
          {{ t('amount') }}<AppAmount class="amount-icon" :amount="getAmount(item)" :currency-type="item.content?.currency_name"/>
        </div>

        <div class="delete-icon" @click.stop="deleteNotification(item.id, index)">
          <BaseImage width="20px" url="/images/png/notification/delete_icon.png" />
        </div>
      </div>

      <div v-if="displayNotifications.length === 0" class="empty-notification">
        <BaseEmpty :description="t('no_content')" :icon="emptyIcon" style="padding-top: 300px;" />
      </div>
    </div>

    <!-- 站内信内容区域 -->
    <div class="notification-content" v-if="activeTab === 1">
      <div v-for="item in displayMessages" :key="item.id" class="message-item" :class="{ 'unread': item.read === false }">
        <div class="message-time">
          {{ timeToDateFormat3(item.created_at as number) }}
          <span v-if="item?.read === false" class="unread-indicator"></span>
        </div>
        <div class="message-title">{{ item.title }}</div>
        <div class="message-content" :class="{ 'collapsed': item.collapsed }">{{ item.content }}</div>
        <div class="flex justify-end mb-[25px]">
          <div v-if="item.content.length > 50" class="show-all-button" @click="toggleMessageCollapse(item)">
            {{ item.collapsed ? t('notification_show_all') : t('notification_hide') }}
            <BaseImage width="14px" :url="item.collapsed ? '/images/png/notification/arrow-down.png' : '/images/png/notification/arrow_up.png'" />
          </div>
        </div>

        <div class="delete-icon" @click.stop="deleteMessage(item.id)">
          <BaseImage width="20px" url="/images/png/notification/delete_icon.png" />
        </div>
      </div>

      <div v-if="displayMessages.length === 0" class="empty-notification">
        <BaseEmpty :description="t('no_content')" :icon="emptyIcon" style="padding-top: 300px;" />
      </div>
    </div>

    <!-- 公告内容区域 -->
    <div class="notification-content" v-if="activeTab === 2">
      <div v-for="item in displayAnnouncements" :key="item.id" class="announcement-item"
        :class="{ 'unread': item.read === false }">
        <div class="announcement-time">
          {{ timeToDateFormat3(item.start_time as number) }}
          <span v-if="item.read === false" class="unread-indicator"></span>
        </div>
        <div class="announcement-title">{{ item.title }}</div>
        <div class="announcement-content">
          <!-- <template v-if="item.image">
            collapsed
            <div class="announcement-image">
              <img :src="item.image" alt="公告图片" />
            </div>
          </template> -->
          <div>{{ getPlainTextFromHtml(item.content) }}</div>
        </div>
        <!-- <div class="flex justify-end mb-[25px]">
          <div v-if="item.content.length > 50" class="show-all-button" @click="toggleCollapse(item)">
            {{ item.collapsed ? t('notification_show_all') : t('notification_hide') }}
            <BaseImage width="14px" :url="item.collapsed ? arrowDown : arrowUp" />
          </div>
        </div> -->

        <div class="delete-icon">
          <BaseImage width="20px" url="/images/png/notification/delete_icon.png" />
        </div>
      </div>

      <div v-if="displayAnnouncements.length === 0" class="empty-notification">
        <BaseEmpty :description="t('no_content')" :icon="emptyIcon" style="padding-top: 300px;" />
      </div>
    </div>

    <!-- 有奖反馈区域 -->
    <div v-if="activeTab === 3" class="px-[16px]">
      <!-- 子标签页 -->
      <div class="feedback-tabs">
        <div v-for="(tab, index) in feedbackTabs" :key="index" class="feedback-tab"
          :class="{ active: activeFeedbackTab === index }" @click="handleFeedbackTabChange(index)">
          {{ tab.name }}
        </div>
      </div>

      <!-- 创建反馈内容 -->
      <div v-if="activeFeedbackTab === 0" class="feedback-content">
        <div class="feedback-section">
          <div class="feedback-title">
            <span>{{ t('notification_feedback_content') }}</span>
            <div class="feedback-char-count">{{ feedbackCharCount }}/{{ maxContentLength }}</div>
          </div>

          <textarea v-model="feedbackText" class="feedback-textarea"
            :placeholder="t('notification_enter_feedback_content')" :maxlength="maxContentLength" @blur="handleBlur"></textarea>
        </div>

        <div class="feedback-section">
          <div class="feedback-title">{{ t('notification_image_upload') }}</div>
          <div class="feedback-images">
            <div v-for="(image, index) in feedbackImages" :key="index" class="feedback-image-item">
              <img :src="image" alt="反馈图片" />
              <div class="feedback-image-delete" @click="removeImage(index)">
                <BaseImage width="56px" url="/images/png/notification/close_icon.png" />
              </div>
            </div>
            <div v-if="feedbackImages.length < maxImagesCount" class="feedback-image-upload" @click="uploadImage">
              <BaseImage width="56px" url="/images/png/notification/upload_img.png" />
            </div>
          </div>
          <div class="feedback-image-hint">{{ t('notification_upload_image_hint') }}</div>
        </div>

        <div class="feedback-section">
          <div class="feedback-title" style="font-size: 16px;">{{ t('notification_reward_rules') }}</div>
          <div class="feedback-rules">
            {{ t('notification_feedback_reward_description') }}
          </div>
        </div>

        <div class="feedback-actions">
          <button class="feedback-cancel" @click="cancelFeedback">{{ t('cancel') }}</button>
          <button class="feedback-submit" @click="submitFeedback">{{ t('submit') }}</button>
        </div>
      </div>

      <!-- 我的反馈列表 -->
      <div v-else-if="activeFeedbackTab === 1" class="feedback-list">
        <div v-for="feedback in myFeedbacks" :key="feedback.id" class="feedback-item"
          @click="openFeedbackChatModal(feedback)">
          <div class="feedback-time">
            {{ feedback.time }}
            <span class="unread-indicator"></span>
          </div>
          <div class="feedback-status-row">
            <span class="text-white text-[14px]">{{ t('notification_feedback_status') }}：</span>
            <span class="feedback-status"
              :class="{ 'status-pending': feedback.status === '待处理', 'status-completed': feedback.status === '已完成' }">
              {{ feedback.status }}
            </span>
          </div>
          <div class="feedback-id-row">
            <span>{{ t('notification_feedback_id') }}：</span>
            <span>{{ feedback.id }}</span>
          </div>
          <div class="feedback-content-row">
            <span>{{ t('notification_content') }}：</span>
            <span>{{ feedback.content }}</span>
          </div>
        </div>
        <div v-if="myFeedbacks.length === 0" class="empty-notification">
          <BaseEmpty :description="t('no_content')" :icon="emptyIcon" style="padding-top: 300px;" />
        </div>
      </div>

      <!-- 底部待领取奖金 -->
      <div class="reward-footer" v-if="activeFeedbackTab === 1">
        <div class="pending-reward">
          {{ t('notification_pending_reward') }}：
          <span class="reward-amount">{{ pendingReward }}</span>
          <BaseCurrencyIcon style="width: 14px; height: 14px" cur="USDT" />
        </div>
        <button class="reward-claim-btn" @click="openRewardModal">{{ t('notification_claim') }}</button>
      </div>
    </div>

    <!-- 底部控制栏 -->
    <div class="notification-footer" v-if="activeTab < 3">
      <div class="unread-toggle">
        {{ t('notification_show_unread') }}
        <label class="toggle-switch">
          <input type="checkbox" v-model="showUnreadOnly">
          <span class="toggle-slider"></span>
        </label>
      </div>
      <div class="mark-read" @click="markAllRead">
        <BaseImage width="19px" url="/images/png/notification/marker_icon.png" /> {{ t('notification_mark_all_read') }}
      </div>
    </div>

    <!-- 领取奖金弹窗 -->
    <div v-if="showRewardModal" class="reward-modal-overlay">
      <div class="reward-modal-mask"></div>
      <div class="reward-modal-container">
        <div class="reward-modal-header">
          <div class="reward-modal-title">{{ t('notification_claim_reward') }}</div>
          <div class="reward-modal-close" @click="closeRewardModal">×</div>
        </div>
        <div class="reward-modal-content">
          <div class="reward-row">
            <div class="reward-label" style="font-size: 14px;color: #ffffff;">{{ t('notification_pending_reward') }}：
            </div>
            <div class="reward-value">
              {{ pendingReward }}
              <BaseCurrencyIcon style="width: 14px; height: 14px" cur="USDT" />
            </div>
          </div>

          <div class="reward-row" style="flex-direction: column;align-items: baseline;gap: 7px;">
            <div class="reward-label">{{ t('notification_select_currency') }}：</div>
            <AppNotificationSelect v-model="selectedCurrency" :options="currencyList" :searchable="true"
              style="width: 100%;" />
          </div>

          <div class="reward-row">
            <div class="reward-label" style="font-size: 14px;color: #ffffff;">{{ t('notification_estimated_amount') }}：
            </div>
            <div class="reward-estimated">
              {{ estimatedAmount }}
              <BaseCurrencyIcon style="width: 14px; height: 14px" cur="USDT" />
            </div>
          </div>

          <div class="reward-row" style="justify-content: flex-start;">
            <div class="reward-label">{{ t('notification_current_rate') }}：</div>
            <div class="reward-rate">{{ currentRate.toFixed(8) }}</div>
          </div>

          <div class="reward-buttons">
            <button class="reward-cancel-btn" @click="closeRewardModal">{{ t('cancel') }}</button>
            <button class="reward-confirm-btn" @click="confirmReceiveReward">{{ t('notification_confirm_claim')
              }}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 现有的详情弹框 -->
    <div v-if="showDetailSheet" class="detail-modal-overlay">
      <div class="detail-modal-mask"></div>
      <div class="detail-modal-container">
        <div class="detail-modal-header">
          <div class="detail-modal-title">{{ getTitle(currentDetail?.title || '') }}</div>
          <div class="detail-modal-close" @click="closeDetailSheet">×</div>
        </div>
        <div class="detail-modal-content">
          <div class="detail-amount" :class="currentDetail?.type || 'success'">
            {{ t('amount') }} {{ currentDetail ? getAmount(currentDetail) : '0.00' }}
          </div>

          <div class="detail-row">
            <span class="detail-label">{{ t('transaction_time') }}：</span>
            <span class="detail-value">{{ timeToDateFormat4(currentDetail?.timestamp || 0) }}</span>
          </div>

          <div class="detail-row">
            <span class="detail-label">{{ t('order_number') }}：</span>
            <span class="detail-value order-value">
              {{ currentDetail?.id || '228524226860896993' }}
              <BaseImage url="/images/png/notification/copy_icon.png" width="14px" style="margin-left: 4px;"
                @click="copyOrderNo(currentDetail?.id || '228524226860896993', $event)" alt="复制" />
            </span>
          </div>

          <div class="support-button-wrapper">
            <button class="support-button">{{ t('notification_contact_online_support') }}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Feedback Chat Modal -->
    <FeedbackChatModal :show="showFeedbackChatModal" :feedbackItem="selectedFeedbackForChat"
      @close="closeFeedbackChatModal" />
  </div>
</template>

<style lang="scss" scoped>
.notification-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  background-color: #232626;
  color: #fff;
}

.notification-tabs {
  width: 100%;
  padding: 0 12px;
  margin-top: 16px;
}

.tab-item-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
  background: #323738;
  border-radius: 6px;
  overflow: hidden;
}

.tab-item {
  flex: 1;
  height: 35px;
  position: relative;
  text-align: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #B3BEC1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item.active {
  color: #fff;
  border-radius: 6px;
  background: #3A4142;
}

.tab-name {
  text-wrap: nowrap;
}

.tab-badge {
  position: relative;
  top: 0;  
  right: 0;
  margin-left: 4px;
  background-color: #9FE871;
  color: #000000;
  border-radius: 4px;
  padding: 0px 6px;
  height: 12px;
  font-size: 10px;
  min-width: 16px;
  text-align: center;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px;
  margin-top: 16px;
}

.notification-item {
  background-color: #323738;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px;
  position: relative;
}

.notification-item.unread {
  position: relative;
}

.unread-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #24EE89;
  border-radius: 50%;
  margin-left: 8px;
}

.status-text {
  font-size: 14px;
}

.notification-time {
  color: #B3BEC1;
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.status-dot {
  display: none;
}

.status-dot.success {
  background-color: #24EE89;
}

.notification-status {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.icon-success::before {
  content: "✓";
  font-size: 18px;
}

.icon-error::before {
  content: "✕";
  font-size: 18px;
}

.icon-pending::before {
  content: "!";
  font-size: 18px;
}

.notification-amount {
  width: 100%;
  color: #B3BEC1;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  :deep(.amount-icon) {
    vertical-align:  middle;
    .amount{
      span{
        display: flex;
        align-items: center;
        justify-content: center;
        color: #B3BEC1;
        font-family: "SF Pro";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
    .app-currency-icon{
      width: 14px;
      height: 14px;
    }
  }
}

.currency-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #4285f4;
  border-radius: 50%;
  margin-left: 4px;
}

.read-toggle {
  position: absolute;
  top: 12px;
  right: 44px;
  cursor: pointer;
  color: #999;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-read::before {
  content: "👁️";
  font-size: 16px;
}

.delete-icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  cursor: pointer;
  color: #999;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #333;
  background: #323738;
}

.unread-toggle {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  margin-left: 8px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  border-radius: 20px;
  transition: .4s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

input:checked+.toggle-slider {
  background-color: #24EE89;
}

input:checked+.toggle-slider:before {
  transform: translateX(16px);
  background-color: white;
}

.mark-read {
  display: flex;
  align-items: center;
  color: #24EE89;
  gap: 4px;
  font-size: 14px;
  cursor: pointer;
}

.icon-check {
  margin-right: 4px;
  font-size: 18px;
}

.icon-check::before {
  content: "✓";
}

.empty-notification {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  color: #999;
  font-size: 14px;
}

/* 自定义底部弹框样式 */
.detail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.detail-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

.detail-modal-container {
  position: relative;
  width: 100%;
  background-color: #232626;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  animation: slideUp 0.3s ease;
  max-height: 80vh;
  overflow-y: auto;
}

.detail-modal-header {
  position: relative;
  padding: 16px;
  text-align: center;
}

.detail-modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.detail-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background-color: #4A5354;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  font-weight: 600;
}

.detail-modal-content {
  padding: 0 16px 24px;
}

.detail-amount {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 15px 0 24px;

}

.detail-amount.success {
  color: #24EE89;
}

.detail-amount.error {
  color: #FF5252;
}

.detail-amount.pending {
  color: #FFC107;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 14px;
}

.detail-label {
  font-weight: 600;
  color: #B3BEC1;
}

.detail-value {
  color: #B3BEC1;
  display: flex;
  align-items: center;
}

.currency-value {
  display: flex;
  align-items: center;
}

.currency-icon-cny {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #FF7E21;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.currency-icon-cny::before {
  content: "¥";
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.status-value {
  display: flex;
  align-items: center;
}

.status-value.success {
  color: #24EE89;
}

.status-value.error {
  color: #FF5252;
}

.status-value.pending {
  color: #FFC107;
}

.order-value {
  position: relative;
}

.copy-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  cursor: pointer;
}

.support-button-wrapper {
  margin-top: 30px;
}

.support-button {
  width: 100%;
  height: 44px;
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  border-radius: 8px;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* 新增体育投注弹框样式 */
.bet-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bet-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

.bet-modal-container {
  position: relative;
  width: 100%;
  background-color: #232626;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  animation: slideUp 0.3s ease;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* 防止水平滚动 */
}

.bet-modal-header {
  position: relative;
  padding: 16px;
  text-align: center;
}

.bet-modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.bet-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background-color: #4A5354;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  font-weight: 600;
}

.bet-modal-content {
  padding: 0 16px 24px;
  position: relative;
  padding-bottom: 30px;
  /* 增加底部空间 */
}

/* ID部分 */
.bet-id-section {
  margin: 5px 0 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bet-id {
  font-size: 18px;
  font-weight: 600;
  color: #24EE89;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.copy-icon {
  width: 14px;
  height: 14px;
  margin-left: 6px;
  cursor: pointer;
}

.bet-info {
  font-size: 12px;
  color: #B3BEC1;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
}

/* 电影票头部 */
.bet-ticket-header {
  display: flex;
  align-items: center;
  background: transparent;
  margin-bottom: 0;
  padding: 10px;
  border-radius: 4px 4px 0 0;
  background: #323738;
}

.bet-result-label {
  background: #24EE89;
  color: #232626;
  font-weight: bold;
  font-size: 12px;
  border-radius: 4px;
  padding: 1px 4px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  height: 18px;
}

.bet-ticket-time {
  color: #B3BEC1;
  font-size: 12px;
  flex: 1;
  text-align: left;
}

/* 电影票卡片 */
.bet-ticket-card {
  position: relative;
  background: #292d2e;
  margin-bottom: 24px;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bet-ticket-content {
  padding: 20px 0px 24px 0px;
  position: relative;
  z-index: 2;
}

/* 新增左右分栏结构 */
.bet-match-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
  padding: 0 16px;
}

.bet-match-left {
  display: flex;
  align-items: flex-start;
}

.bet-match-icon {
  font-size: 18px;
  margin-right: 8px;
  margin-top: 2px;
}

.bet-match-info-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bet-match-name {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bet-type {
  font-size: 12px;
  color: #B3BEC1;
}

.bet-selection {
  font-size: 14px;
  color: #fff;
}

.bet-score-range {
  font-size: 13px;
  color: #24EE89;
  font-weight: bold;
}

.bet-match-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 48px;
  gap: 6px;
}

.bet-odds {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.bet-icons {
  display: flex;
  gap: 6px;
}

.bet-icon-tv,
.bet-icon-chart {
  width: 22px;
  height: 22px;
  background-color: #4A5354;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
}

/* 卡片底部花纹和圆球分隔 */
.bet-ticket-wave-img {
  position: relative;
  width: 100%;
  height: 24px;
  margin-top: -8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ticket-up-img {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  object-fit: cover;
  z-index: 1;
}

.ticket-down-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}

/* 移除原有mask和圆球分隔相关样式 */
.bet-ticket-wave-bottom,
.bet-ticket-balls,
.bet-ticket-ball {
  display: none !important;
}

/* 赔率投注额区域 */
.bet-amount-info {
  padding: 12px 16px 0px 16px;
}

.bet-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.bet-amount-label {
  font-size: 14px;
  color: #B3BEC1;
}

.bet-amount-value {
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
}

.green-text {
  color: #24EE89 !important;
  font-weight: bold;
  font-size: 16px;
}

.currency-stamp {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #24EE89;
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #232626;
  font-size: 10px;
  font-weight: bold;
}

/* 退出动画 */
.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

.slide-down {
  animation: slideDown 0.3s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

/* 添加回丢失的动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* 站内信样式 */
.message-item {
  background-color: #323738;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px;
  position: relative;
}

.message-item.unread {
  position: relative;
}

.message-time {
  color: #B3BEC1;
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.message-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #fff;
}

.message-content {
  color: #B3BEC1;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.4;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.message-content.collapsed {
  max-height: 80px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* 公告样式 */
.announcement-item {
  background-color: #323738;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px;
  position: relative;
}

.announcement-item.unread {
  position: relative;
}

.announcement-time {
  color: #B3BEC1;
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.announcement-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #fff;
}

.announcement-content {
  color: #B3BEC1;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.announcement-content.collapsed {
  max-height: 80px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.announcement-image {
  margin: 10px 0;
  width: 100%;
}

.announcement-image img {
  width: 100%;
  border-radius: 6px;
}

.show-all-button {
  background-color: #3A4142;
  color: #fff;
  font-size: 12px;
  text-align: center;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100px;
}

/* 有奖反馈子标签页 */
.feedback-tabs {
  display: flex;
  background-color: #232626;
  margin-bottom: 20px;
}

.feedback-tab {
  padding: 15px 20px;
  font-size: 12px;
  color: #B3BEC1;
  cursor: pointer;
  position: relative;
}

.feedback-tab.active {
  color: #ffffff;
}

.feedback-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #24EE89;
}

/* 创建反馈样式 */
.feedback-content {
  padding: 12px;
  color: #fff;
  background: #323738;
  border-radius: 6px;
}

.feedback-section {
  margin-bottom: 20px;
}

.feedback-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 6px 0;
  display: flex;
  justify-content: space-between;
}

.feedback-char-count {
  font-size: 12px;
  color: #B3BEC1;
  text-align: right;
  margin-bottom: 5px;
}

.feedback-textarea {
  width: 100%;
  height: 120px;
  background-color: #292d2e;
  border: none;
  border-radius: 6px;
  padding: 12px;
  color: #B3BEC1;
  font-size: 14px;
  resize: none;
  border-top: 1px solid var(---border-black-33B4041, #3B4041)
}

.feedback-textarea::placeholder {
  color: #7A8283;
}

.feedback-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.feedback-image-item {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.feedback-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-image-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.feedback-image-upload {
  background-color: #323738;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.feedback-image-hint {
  font-size: 12px;
  color: #A8AEB0;
  margin-top: 10px;
}

.feedback-rules {
  background-color: #323738;
  border-radius: 6px;
  font-size: 12px;
  color: #A8AEB0;
  line-height: 1.5;
}

.feedback-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.feedback-cancel {
  flex: 1;
  height: 44px;
  background-color: #3A4142;
  border: none;
  border-radius: 8px;
  color: #B3BEC1;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}

.feedback-submit {
  flex: 1;
  height: 44px;
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  border: none;
  border-radius: 8px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}

/* 我的反馈列表 */
.feedback-list {
  min-height: 400px;
  overflow-y: auto;
  flex: 1;
}

.feedback-item {
  background-color: #323738;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 12px;
  position: relative;
  cursor: pointer;
  /* Add cursor pointer to indicate it's clickable */
}

.feedback-time {
  color: #B3BEC1;
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.feedback-status-row,
.feedback-id-row,
.feedback-content-row {
  margin-bottom: 6px;
  font-size: 12px;
  color: #B3BEC1;
}

.feedback-status {
  font-size: 14px;
  font-weight: bold;
}

.status-pending {
  color: #24EE89;
}

.status-completed {
  color: #ffffff;
}

/* 待领取奖金底部 */
.reward-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #292D2E;
  padding: 12px 16px;
}

.pending-reward {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 12px;
}

.reward-amount {
  color: #24EE89;
  font-weight: bold;
  margin-right: 5px;
}

.reward-claim-btn {
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  color: #000;
  border: none;
  font-size: 12px;
  border-radius: 8px;
  padding: 8px 34px;
  font-weight: bold;
  cursor: pointer;
}

/* 领取奖金弹窗 */
.reward-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.reward-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

.reward-modal-container {
  position: relative;
  width: 100%;
  background-color: #232626;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  animation: slideUp 0.3s ease;
  max-height: 80vh;
  overflow-y: auto;
}

.reward-modal-header {
  position: relative;
  padding: 16px;
  text-align: center;
}

.reward-modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.reward-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background-color: #4A5354;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  font-weight: 600;
}

.reward-modal-content {
  padding: 16px;
}

.reward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: #B3BEC1;
  font-size: 14px;
}

.reward-value,
.reward-estimated {
  color: #24EE89;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.reward-currency-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #292D2E;
  border-radius: 6px;
  padding: 8px 12px;
  width: 100%;
  cursor: pointer;
  border: 1px solid var(---bg-black-53A4142, #3A4142)
}

.currency-selected {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reward-buttons {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.reward-cancel-btn {
  flex: 1;
  height: 44px;
  background-color: #323738;
  border: none;
  border-radius: 8px;
  color: #B3BEC1;
  font-weight: bold;
  cursor: pointer;
}

.reward-confirm-btn {
  flex: 1;
  height: 44px;
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  border: none;
  border-radius: 8px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}
</style>
